Datepickers

Datepickers

A datepicker is a non text input form element. You can select a single date or date range from a popup or inline calendar.

Base

Preview

No content has been added for this component.

No content has been added for this component.

<div aria-hidden="false" aria-label="Date picker: June" class="slds-datepicker slds-dropdown slds-dropdown_left" role="dialog">
  <div class="slds-datepicker__filter slds-grid">
    <div class="slds-datepicker__filter_month slds-grid slds-grid_align-spread slds-grow">
      <div class="slds-align-middle">
        <button class="slds-button slds-button_icon slds-button_icon-container" title="Previous Month">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#left"></use>
          </svg>
          <span class="slds-assistive-text">Previous Month</span>
        </button>
      </div>
      <h2 aria-atomic="true" aria-live="assertive" class="slds-align-middle" id="month">June</h2>
      <div class="slds-align-middle">
        <button class="slds-button slds-button_icon slds-button_icon-container" title="Next Month">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#right"></use>
          </svg>
          <span class="slds-assistive-text">Next Month</span>
        </button>
      </div>
    </div>
    <div class="slds-shrink-none">
      <label class="slds-assistive-text" for="select-01">Pick a Year</label>
      <div class="slds-select_container">
        <select class="slds-select" id="select-01">
          <option>2014</option>
          <option>2015</option>
          <option>2016</option>
        </select>
      </div>
    </div>
  </div>
  <table aria-labelledby="month" aria-multiselectable="true" class="slds-datepicker__month" role="grid">
    <thead>
      <tr id="weekdays">
        <th id="Sunday" scope="col">
          <abbr title="Sunday">Sun</abbr>
        </th>
        <th id="Monday" scope="col">
          <abbr title="Monday">Mon</abbr>
        </th>
        <th id="Tuesday" scope="col">
          <abbr title="Tuesday">Tue</abbr>
        </th>
        <th id="Wednesday" scope="col">
          <abbr title="Wednesday">Wed</abbr>
        </th>
        <th id="Thursday" scope="col">
          <abbr title="Thursday">Thu</abbr>
        </th>
        <th id="Friday" scope="col">
          <abbr title="Friday">Fri</abbr>
        </th>
        <th id="Saturday" scope="col">
          <abbr title="Saturday">Sat</abbr>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td aria-disabled="true" aria-selected="false" class="slds-disabled-text" role="gridcell">
          <span class="slds-day">31</span>
        </td>
        <td aria-selected="false" role="gridcell" tabindex="0">
          <span class="slds-day">1</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">2</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">3</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">4</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">5</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">6</span>
        </td>
      </tr>
      <tr>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">7</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">8</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">9</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">10</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">11</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">12</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">13</span>
        </td>
      </tr>
      <tr>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">14</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">15</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">16</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">17</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">18</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">19</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">20</span>
        </td>
      </tr>
      <tr>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">21</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">22</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">23</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">24</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">25</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">26</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">27</span>
        </td>
      </tr>
      <tr>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">28</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">29</span>
        </td>
        <td aria-selected="false" role="gridcell">
          <span class="slds-day">30</span>
        </td>
        <td aria-disabled="true" aria-selected="false" class="slds-disabled-text" role="gridcell">
          <span class="slds-day">1</span>
        </td>
        <td aria-disabled="true" aria-selected="false" class="slds-disabled-text" role="gridcell">
          <span class="slds-day">2</span>
        </td>
        <td aria-disabled="true" aria-selected="false" class="slds-disabled-text" role="gridcell">
          <span class="slds-day">3</span>
        </td>
        <td aria-disabled="true" aria-selected="false" class="slds-disabled-text" role="gridcell">
          <span class="slds-day">4</span>
        </td>
      </tr>
      <tr>
        <td colspan="7" role="gridcell">
          <span class="slds-show_inline-block slds-text-link slds-p-bottom_x-small">Today</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

About Base

If you desire a multi-select date range, the selected cell will need to have .slds-is-selected-multi applied. Another scenario would be a multi range selection spanning over two or more weeks. If this scenario is true, each <tr> will need the class .slds-has-multi-row-selections added.


Overview of CSS Classes

Selector.slds-datepicker
Summary

Initiates a datepicker component

Supportdev-ready
Restrictdiv
VariantTrue
Selector.slds-day
Summary

Style for calendar days

Restrict.slds-datepicker td span
Selector.slds-is-today
Summary

Indicates today

Restrict.slds-datepicker td
Selector.slds-is-selected
Summary

Indicates selected days

Restrict.slds-datepicker td
ModifierTrue
Selector.slds-is-selected-multi
Summary

Indicates if selected days are apart of a date range

Restrict.slds-datepicker td
ModifierTrue
Selector.slds-has-multi-row-selection
Summary

Helper class that styles date range appropriately

Restrict.slds-datepicker tr
Selector.slds-datepicker__filter
Summary

Aligns filter items horizontally

Restrict.slds-datepicker div
Selector.slds-datepicker__month_filter
Summary

Spaces out month filter

Restrict.slds-datepicker div
Selector.slds-datepicker__month
Summary

Container of the month table

Restrict.slds-datepicker table
Selector.slds-disabled-text
Summary

Indicates days that are in previous/next months

Restrict.slds-datepicker td
ModifierTrue